<template>
  <el-card shadow="hover" :body-style="{ padding: '20px' }">
    <el-form
      label-width="80px"
      :inline="true"
      class="demo-form-inline"
      :disabled="disabled"
    >
      <el-form-item label="一级分类">
        <el-select
          placeholder="请选择"
          @change="category1Change"
          v-model="(category1Id as number)  "
        >
          <el-option
            v-for="item in categoryList1"
            :label="item.name"
            :value="item.id"
            :key="item.id"
            loading
          />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select
          placeholder="请选择"
          @change="category2Change"
          v-model="(category2Id as number)  "
        >
          <el-option
            v-for="item in categoryList2"
            :label="item.name"
            :value="item.id"
            :key="item.id"
            loading
          />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select placeholder="请选择" v-model="(category3Id as number)  ">
          <el-option
            v-for="item in categoryList3"
            :label="item.name"
            :value="item.id"
            :key="item.id"
            loading
          />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Category",
});
</script>

<script setup lang="ts">
import { onMounted } from "vue";
//引入attr仓库
import userAttrStore from "@/stores/attr";

import { storeToRefs } from "pinia";
//引入type
import type { reqCategoryType, reqCategoryItemType } from "@/api/attr";

//接收prop的传值定义类型
defineProps<{
  disabled: boolean;
}>();

//获取attr仓库是咧对象
const attrStore = userAttrStore();

//解构出仓库中的方法
const { getcategoryList1, getCategory2, getCategory3 } = attrStore;
//解构出仓库中的state storetorefs
const {
  categoryList1,
  category1Id,
  categoryList2,
  category2Id,
  category3Id,
  categoryList3,
} = storeToRefs(attrStore);
//初始化执行
onMounted(() => {
  //请求一级分类
  getcategoryList1();
});
//一级分类选择后请求二级分类事件函数
const category1Change = () => {
  //先清空二级和三级的所有数据
  categoryList2.value = [];
  category2Id.value = null;
  categoryList3.value = [];
  category3Id.value = null;
  //调用请求
  getCategory2();
};
//二级分类选择后请求三级分类事件函数
const category2Change = () => {
  //先清空三级的所有数据
  categoryList3.value = [];
  category3Id.value = null;
  //调用请求
  getCategory3();
};
</script>
